<template>
	<view>
		<view class="nav1">
			<u-navbar title="评价列表" bgColor="transparent" :fixed="false" :autoBack="false">
				<view class="flex" slot="left">
					<view class="nav-left flex">
						<u-icon name="arrow-left" size="24" @click="back"></u-icon>
						<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
						<u-icon name="home" size="24" @click="toHome"></u-icon>
					</view>
				</view>
			</u-navbar>
		</view>
		<u-gap height="10"></u-gap>
		<view class="ml30 mr30" v-if="detail">
			<view class="f26 bold flex c343">
				<u-icon name="star-fill" color="#FFDE6D" size="20"></u-icon>
				<text class="ml10">{{detail.mark}} · {{detail.observeNumber}}条评价</text>
			</view>
			<u-gap height="10"></u-gap>
			<view class="bgFff radius30 p30 flex flex-start">
				<view class="pf_box">
					<view class="c343 f26">
						总体评分
					</view>
					<view class="flex mt20">
						<text class="c343 f24 mr10">{{detail.productSoure.firstScore.toFixed(1)}}</text>
						<u-line-progress :percentage="detail.productSoure.firstScore * 20" activeColor="#FFDE6D"
							inactiveColor="#f7f7f7" height="4" :showText="false"></u-line-progress>
					</view>
					<u-gap height="8"></u-gap>
					<view class="flex">
						<text class="c343 f24 mr10">{{detail.productSoure.secondScore.toFixed(1)}}</text>
						<u-line-progress :percentage="detail.productSoure.secondScore * 20" activeColor="#FFDE6D"
							inactiveColor="#f7f7f7" height="4" :showText="false"></u-line-progress>
					</view>
					<u-gap height="8"></u-gap>
					<view class="flex">
						<text class="c343 f24 mr10">{{detail.productSoure.thirdScore.toFixed(1)}}</text>
						<u-line-progress :percentage="detail.productSoure.thirdScore * 20" activeColor="#FFDE6D"
							inactiveColor="#f7f7f7" height="4" :showText="false"></u-line-progress>
					</view>
					<u-gap height="8"></u-gap>
					<view class="flex">
						<text class="c343 f24 mr10">{{detail.productSoure.fourthScore.toFixed(1)}}</text>
						<u-line-progress :percentage="detail.productSoure.fourthScore * 20" activeColor="#FFDE6D"
							inactiveColor="#f7f7f7" height="4" :showText="false"></u-line-progress>
					</view>
					<u-gap height="8"></u-gap>
					<view class="flex">
						<text class="c343 f24 mr10">{{detail.productSoure.fifthScore.toFixed(1)}}</text>
						<u-line-progress :percentage="detail.productSoure.fifthScore * 20" activeColor="#FFDE6D"
							inactiveColor="#f7f7f7" height="4" :showText="false"></u-line-progress>
					</view>
				</view>
				<view class="pf_detail ml20">
					<u-scroll-list :indicator="false">
						<view class="mr30 flex-jus flex-col pf-item flex-start" v-for="(item,index) in pf_list"
							:key="index">
							<view class="">
								<view class="c343 f26 title-text pore">{{item.name}}</view>
								<u-gap height="10"></u-gap>
								<view class="flex-au">
									<image src="../static/housekeeping/pf_l.png" mode=""
										style="width: 32rpx;height: 32rpx;"></image>
									<text
										class="c343 f32 bold ml10 mr10">{{detail.productSoure[item.key].toFixed(1)}}</text>
									<image src="../static/housekeeping/pf_r.png" mode=""
										style="width: 32rpx;height: 32rpx;"></image>
								</view>
							</view>
							<view class="">
								<image :src="'../static/housekeeping/' + item.icon + '.png'" mode=""
									style="width: 50rpx;height: 50rpx;"></image>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
			<u-gap height="20"></u-gap>
			<view class="flex-jus">
				<text class="c343 bold f28">{{detail.observeNumber}}条评论</text>
				<view>
					<u-button color="#FFDE6D" :customStyle="{'color':'#34314F','height':'60rpx','fontSize':'26rpx'}"
						shape="circle" @click="showFilter">
						<view class="flex">
							<text class="mr30">{{sel_filter.name}}</text>
							<u-icon name="arrow-down" color="#34314F" size="14"></u-icon>
						</view>
					</u-button>
				</view>
			</view>
			<u-gap height="10"></u-gap>
			<view class="flex flex-wrap">
				<view class="m10" v-for="(item,index) in pjTag" :key="index">
					<u-tag type="info" size="mini" :text="item.dictLabel + ' '  +item.dictValue" shape="circle" plain
						:color="dictCode == item.dictCode?'#fff':'#999'"
						:bgColor="dictCode == item.dictCode?'#FF7F1C':'transparent'"
						:borderColor="dictCode == item.dictCode?'#FF7F1C':'#999'" @click="sel_plTag(item)"></u-tag>
				</view>
			</view>
			<u-gap height="10"></u-gap>
			<view>
				<view class="mb30 menu-item" v-for="(item,index) in listData" :key="index">
					<view class="pj-item bgFff radius30 p20">
						<view class="flex">
							<u-image :src="api_host + item.user.userAvatar" mode="" width="40px" height="40px"
								shape="circle"></u-image>
							<view class="ml10">
								<view class="c343 f28">{{item.user.userName}}</view>
								<view class="c999 f24">{{item.user.useTime}}</view>
							</view>
						</view>
						<!-- <u-gap height="10"></u-gap>
						<view class="flex flex-wrap">
							<view class="radius30 active f24 tag_item mr10 mb10"
								v-for="(item2,index2) in item.tagList" :key="index2">{{item2}}</view>
						</view> -->
						<u-gap height="10"></u-gap>
						<view class="flex">
							<u-rate count="5" v-model="item.score" activeColor="#FFDE6D" readonly></u-rate>
							<text class="f24 c999 ml10">{{item.commentTime}}</text>
						</view>
						<u-gap height="10"></u-gap>
						<view class="f26 c343" v-if="item.content">
							{{item.content}}
						</view>
						<u-gap height="10"></u-gap>
						<view class="pore flex flex-wrap" v-if="item.imgsArr.length > 0">
							<!-- <image :src="api_host + img" mode="widthFix" v-for="(img,imgIndex) in item.imgsArr"
								:key="imgIndex" @click="$utils.previewImages(imgIndex,item.imgsArr)"
								style="width: 31%;border-radius: 20rpx;margin-right: 10rpx;">
							</image> -->
							<view class="mr10 mb10" v-for="(img,imgIndex) in item.imgsArr" :key="imgIndex"
								@click="$utils.previewImages(imgIndex,item.imgsArr)">
								<u-image :src="api_host + img" mode="aspectFill" width="100px" height="100px"
									radius="5"></u-image>
							</view>
						</view>
						<!-- <u-gap height="10"></u-gap>
						<view>
							<u-button color="#fff4ec"
								:customStyle="{'color':'#FF7F1C','padding':'0 30rpx','height':'60rpx','width':'30%','textAlign':'left'}"
								shape="circle">服务成果</u-button>
						</view> -->
						<u-line color="#eee" length="100%" margin="20rpx 0" v-if="item.reply"></u-line>
						<view class="flex flex-start" v-if="item.reply">
							<u-image :src="api_host + config.avatar" mode="" width="40px" height="40px"
								shape="circle"></u-image>
							<view class="ml10 mt20">
								<view class="c343 f26">平台回复</view>
								<view class="c343 f26 mt20">{{item.reply}}</view>
							</view>
						</view>
						<u-gap height="20"></u-gap>
						<view class="flex-jus">
							<view class="flex1 mr20">
								<u-button color="#f7f7f7" icon="thumb-up-fill"
									:iconColor="item.isLike == 1?'#FF7F1C':'#34314F'"
									:customStyle="{'color':item.isLike == 1?'#FF7F1C':'#34314F','padding':'0 30rpx','height':'60rpx'}"
									shape="circle" @click="commnetStar(item)">点赞 {{item.likeVolume}}</u-button>
							</view>
							<view class="flex1 ml20">
								<u-button color="#f7f7f7" icon="chat-fill" iconColor="#34314F"
									:customStyle="{'color':'#34314F','padding':'0 30rpx','height':'60rpx'}"
									@click="nologinJump('/subpage/housekeeping/commentDetail?id='+id+'&com_id='+item.id)"
									shape="circle">评论 {{item.observeNumber}}</u-button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-gap height="20"></u-gap>
		<u-action-sheet :actions="filter_list" title="筛选" :show="show_filter" @select="filterClick"
			@close="show_filter = false" cancelText="取消"></u-action-sheet>
		<view class="back-top pore">
			<u-back-top :scroll-top="scrollTop" bottom="200" :customStyle="{'backgroundColor':'#FFDE6D'}"
				:iconStyle="{'color':'#000','fontSize':'40rpx','fontWeight':'bold'}"></u-back-top>
		</view>
	</view>
</template>

<script>
	import {
		getHomedetail,
		getCommenList
	} from '@/common/api_housekeeping.js'
	import {
		userLike
	} from '@/common/api_user.js'
	import {
		getGoodsInfo
	} from '@/common/api_tuangou.js'
	import {
		getGoodsComment
	} from '@/common/api_order.js'
	export default {
		name: '',
		data() {
			return {
				scrollTop: 0,
				id: '',
				detail: {
					productSoure: {
						fifthScore: 0,
						firstScore: 0,
						fourthScore: 0,
						secondScore: 0,
						thirdScore: 0
					}
				},
				pf_list: [{
						key: 'firstScore',
						name: '服务质量',
						icon: 'pl1'
					},
					{
						key: 'secondScore',
						name: '服务态度',
						icon: 'pl2'
					},
					{
						key: 'thirdScore',
						name: '按时上门',
						icon: 'pl3'
					},
					{
						key: 'fourthScore',
						name: '客服响应',
						icon: 'pl4'
					},
					{
						key: 'fifthScore',
						name: '符合描述',
						icon: 'pl5'
					}
				],
				pjTag: [],
				listData: [],
				rateTypeList: [],
				stepScores: [],
				lastPage: false,
				dictCode: '',
				orderType: '',
				page: 1,
				pageSize: 20,
				total: 0,
				show_filter: false,
				sel_filter: {
					name: '点赞',
					value: '1'
				},
				filter_list: [{
						name: '点赞',
						value: '1'
					},
					{
						name: '最新',
						value: '2'
					},
					{
						name: '最高分',
						value: '3'
					},
					{
						name: '最低分',
						value: '4'
					}
				]
			}
		},
		onLoad(option) {
			this.id = option.id
			this.orderType = option.type
			if (this.orderType == 3) {
				this.getGoodsInfo()
			} else {
				this.getHomedetail()
			}
			this.getCommenList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onShareAppMessage(res) {
			return {
				title: '东楚畅通',
				path: '/subpage/housekeeping/commentList?id=' + this.id,
				desc: '评价列表',
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		onReachBottom() {
			if (!this.lastPage) {
				this.page = this.page + 1
				this.getCommenList()
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			toHome() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			filterClick(item) {
				this.sel_filter = item
				this.show_filter = false
				this.listData = []
				this.lastPage = false
				this.page = 1
				this.getCommenList()
			},
			showFilter() {
				this.show_filter = true
			},
			async getHomedetail() {
				const that = this
				uni.showLoading({
					mask: true
				})
				const res = await getHomedetail({
					id: this.id
				})
				if (res.code == 200) {
					this.detail = res.data
					const {
						evaluateList
					} = this.detail
					this.pjTag = evaluateList
					this.pjTag.unshift({
						dictLabel: '全部',
						dictCode: '',
						dictValue: this.detail.observeNumber
					})
				}
				uni.hideLoading()
			},
			async getGoodsInfo() {
				const that = this
				uni.showLoading({
					mask: true
				})
				const res = await getGoodsInfo({
					id: this.id
				})
				if (res.code == 200) {
					this.detail = res.data
					const {
						evaluateList
					} = this.detail
					this.pjTag = evaluateList
					this.pjTag.unshift({
						dictLabel: '全部',
						dictCode: '',
						dictValue: this.detail.observeNumber
					})
					this.getRateLabels(res.data.orderType, res.data.goodType)
				}
				uni.hideLoading()
			},

			sel_plTag(item) {
				console.log(item);
				this.listData = []
				this.lastPage = false
				this.page = 1
				this.dictCode = item.dictCode
				this.getCommenList()
			},
			async getCommenList() {
				const that = this
				uni.showLoading({
					mask: true
				})
				const res = await getCommenList({
					proId: this.id,
					dictCode: this.dictCode,
					pageNum: this.page,
					pageSize: this.pageSize,
					sort: this.sel_filter.value,
					orderType: this.orderType
				})
				if (res.code == 200) {
					let data = res.rows.map(item => {
						return {
							...item,
							imgsArr: item.images ? item.images.split(',') : []
						}
					})
					this.total = res.total
					this.lastPage = res.lastPage
					this.listData = this.listData.concat(data)
					console.log(this.listData);
				}
				uni.hideLoading()
			},
			async commnetStar(item) {
				const res = await userLike({
					operation: '2',
					busine: '5',
					speId: item.id
				})
				if (res.code == 200) {
					if (item.isLike == 1) {
						item.likeVolume = item.likeVolume - 1
					} else {
						item.likeVolume = Number(item.likeVolume) + 1
					}
					item.isLike = item.isLike == 1 ? 0 : 1
				}
			},
			// 商品评价类型
			async getRateLabels(orderType, goodType) {
				uni.showLoading({
					mask: true
				})
				const res = await getGoodsComment(orderType, goodType)
				if (res.code == 200) {
					if (res.data.length) {
						res.data.forEach((item, index) => {
							this.pf_list[index].name = item.areaValue
						})
					}
				}
				uni.hideLoading()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F1F9F6;
	}

	.nav-left {
		border-radius: 50rpx;
		padding: 10rpx 20rpx;
		background-color: rgba(#fff, 0.8);
	}

	.pf_box {
		width: 30%;
		padding: 0 20rpx 0 10rpx;
		height: 250rpx;
	}

	.pf_detail {
		margin-left: 20rpx;
		width: 60%;
	}

	.pf-item {
		border-left: 1px solid #eee;
		height: 250rpx;
		padding-left: 20rpx;
		width: 200rpx;
	}

	.tag_item {
		padding: 5rpx 20rpx;
		border: 1px solid transparent;
	}

	.active {
		color: #FF7F1C;
		background-color: #FFFAF5;
		border-color: #FF7F1C;
	}

	.title-text {
		z-index: 10;
		padding-left: 20rpx;
		line-height: 40rpx;
	}

	.title-text::after {
		position: absolute;
		content: '';
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		border-radius: 30rpx;
		background-color: #FFDE6D;
		background-image: linear-gradient(to right, #FFDE6D, #FFFFFE);
		z-index: -1;
	}

	.pj-tag-item {
		width: 200rpx;
	}


	.add-count {
		position: absolute;
		right: 30rpx;
		top: 0;
		height: 100%;
		display: flex;
		align-items: center;

		text {
			background-color: rgba(#000, 0.5);
			border-radius: 50rpx;
			color: #fff;
			padding: 10rpx 30rpx;
		}
	}
</style>